<template>
<div>
    <div class="vs-table-box" v-loading="loading">
        <h3>顾客信息</h3>
        <el-form label-position="right" ref="ruleForm" :rules="rules" :inline="true" class="vs--info"  label-width="110px" :model="ruleForm">
            <el-form-item label="顾客姓名" prop="name">
                <el-input v-model.trim="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="mobile">
                <el-input @blur="phoneBlur" v-model.trim="ruleForm.mobile"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="gender">
                <el-radio-group size="small" v-model="ruleForm.gender">
                    <el-radio :label="0">保密</el-radio>
                    <el-radio :label="1">男</el-radio>
                    <el-radio :label="2">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="预约方式" prop="mode">
                <el-radio-group size="small" v-model="ruleForm.mode">
                    <el-radio :label="0">大众点评</el-radio>
                    <el-radio :label="1">小程序</el-radio>
                    <el-radio :label="2">电话</el-radio>
                    <el-radio :label="3">我的管家</el-radio>
                </el-radio-group>
            </el-form-item>
            <div>
                <el-form-item label="预约日期" prop="date">
                    <el-date-picker 
                        style="width:200px" 
                        range-separator="至"
                        v-model="ruleForm.date" 
                        value-format="yyyy-MM-dd"
                        type="date" placeholder="">
                        </el-date-picker>
                </el-form-item>
                <el-form-item label="预计到店时间" prop="time">
                    <el-time-picker
                        v-model="ruleForm.time"
                        range-separator="至"
                        arrow-control
                        value-format="HH:mm:ss"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        placeholder="">
                    </el-time-picker>
                </el-form-item>
                <el-form-item label="预约人数" prop="number">
                    <el-input v-model="ruleForm.number"></el-input>
                </el-form-item>
            </div>
            <div v-for="(item,i) in ruleForm.projects" :key="i">
                <el-form-item 
                label="项目" 
                :rules="{ required: true, message: '请选择项目', trigger: 'change' }"
                :prop="'projects.'+i+'.project_ids'">
                    <el-select 
                    v-model="item.project_ids" 
                    filterable 
                    @change="changeProj($event,item)"
                    placeholder="请选择">
                        <el-option
                        v-for="val in projectList"
                        :key="val.id"
                        :label="val.name"
                        :value="val.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item 
                    label="房间号" 
                    :rules="{ required: true, message: '请选择房间号', trigger: 'change' }"
                    :prop="'projects.'+i+'.room_id'">
                    <el-select v-model="item.room_id" @change="item.bed_id=''" filterable placeholder="请选择">
                        <el-option
                        v-for="val in roomList"
                        :key="val.id"
                        :label="val.room_number"
                        :value="val.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item 
                label="床位号" 
                :rules="{ required: true, message: '请选择床位号', trigger: 'change' }"
                :prop="'projects.'+i+'.bed_id'">
                    <el-select v-model="item.bed_id" filterable placeholder="请选择">
                        <el-option
                        v-for="val in bedList(item)"
                        :key="val.id"
                        :label="val.number"
                        :value="val.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="">
                    <el-button type="primary" @click="ruleForm.projects.push({ project_ids:'', room_id:'', bed_id:'' })" size="mini" icon="el-icon-plus" circle></el-button>
                    <el-button v-if="i!=0" @click="ruleForm.projects.splice(i,1)" type="danger" size="mini" icon="el-icon-delete" circle></el-button>
                </el-form-item>
            </div>
            <div>
                <el-form-item label="预付金额" prop="advance_amount">
                    <el-input v-model.trim="ruleForm.advance_amount"></el-input>
                </el-form-item>
            </div>
            <div class="asdws">
                <el-form-item label="备注" style="display: flex;" prop="code">
                    <el-input
                        style="width:100%"
                        type="textarea"
                        :rows="5"
                        placeholder=""
                        v-model.trim="ruleForm.remark">
                        </el-input>
                </el-form-item>
            </div>
            <div>
                <el-form-item label="会员号" prop="code">
                    <el-input :value="user.vip_no" readonly></el-input>
                </el-form-item>
            </div>
            <el-form-item label="剩余金额" prop="code">
                <el-input v-model="user.balance" readonly></el-input>
                元
                <span class="tab-red-text">立即充值</span>
            </el-form-item>
        </el-form>
        <!-- <h3>项目信息</h3>
        <el-table v-loading="loading" :data="tableData" header-row-class-name="has-gutter-table" style="width: 1200px">
            <el-table-column prop="username" label="项目" width="130"> </el-table-column>
            <el-table-column prop="code" label="预约房间" min-width="70"> </el-table-column>
            <el-table-column prop="create_time" label="预约床位" min-width="150"> </el-table-column>
            <el-table-column prop="create_time" label="预约技师" min-width="150">
                <template slot="header" slot-scope="scope">
                    预约技师 <span @click="dialogVisible=true" class="tab-red-text">更换</span>
                </template>
            </el-table-column>
            <el-table-column prop="create_time" label="金额(元)" min-width="150"> </el-table-column>
            <el-table-column prop="title" label="备注" min-width="240"> </el-table-column>
        </el-table> -->
        <div class="vs-bottom-btns">
            <el-button @click="utils.backPage()">取消</el-button>
            <el-button @click="submit" type="primary" >确定</el-button>
        </div>
    </div>

    <el-dialog
        title="更换技师"
        :visible.sync="dialogVisible"
        width="600px"
        :before-close="handleClose">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="原技师：">
                <el-select style="width:200px" clearable  v-model="ruleForm.username" placeholder="请选择">
                    <el-option label="推拿" value="1"> </el-option>
                    <el-option label="足疗" value="2"> </el-option>
                    <el-option label="SPA" value="3"> </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="变更后技师：">
                <el-select style="width:200px" clearable  v-model="ruleForm.username" placeholder="请选择">
                    <el-option label="推拿" value="1"> </el-option>
                    <el-option label="足疗" value="2"> </el-option>
                    <el-option label="SPA" value="3"> </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="变更原因">
                <el-input type="textarea" v-model="ruleForm.username"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose()">取 消</el-button>
            <el-button type="primary" :loading="isBtn" @click="setAd">确 定</el-button>
        </span>
    </el-dialog>
    <el-dialog
        title="选择项目"
        :visible.sync="dialogVisible2"
        width="600px">
        <el-descriptions :column="1">
            <el-descriptions-item label="原技师">kooriookami</el-descriptions-item>
            <el-descriptions-item label="变更后技师">18100000000</el-descriptions-item>
            <el-descriptions-item label="变更原因">苏州市</el-descriptions-item>
            <el-descriptions-item label="变更时间：">2021-12-01  12:20:01</el-descriptions-item>
        </el-descriptions>
    </el-dialog>
</div>
</template>

<script>
export default {
    data(){
        return {
            dialogVisible:false,
            dialogVisible2:false,
            loading:false,
            tableData:[],
            isBtn:false,
            ruleForm:{
                name:'',//顾客姓名
                gender:'',//性别 0未知 1男 2女
                mobile:'',//手机
                mode:'',//预约方式 0大众点评 1小程序 2电话 3我的管家
                date:'',//日期
                time:'',//时间
                number:'',//人数
                projects:[{
                    "project_ids":"",//项目
                    "room_id":"",//房间
                    "bed_id":""//床位
                }],//项目和床位信息
                remark:'',//备注
                advance_amount:'',//预付金额
            },
            user:{},
            projectList:[],
            roomList:[],
            ints:-1,
            rules: {
                name:{ required: true, message: '请输入顾客姓名', trigger: 'blur' },
                gender:{ required: true, message: '请选择性别', trigger: 'change' },
                mobile:{ required: true, message: '请输入手机', trigger: 'blur' },
                mode:{ required: true, message: '请选择预约方式', trigger: 'change' },
                date:{ required: true, message: '请选择日期', trigger: 'blur' },
                time:{ required: true, message: '请选择时间', trigger: 'blur' },
                advance_amount:{ required: true, message: '请输入预付金额', trigger: 'blur' },
                number:{ required: true, message: '请输入预约人数', trigger: 'blur' },
            },
        }
    },
    created(){
        let {title,id} = this.$route.query;
        if(title)this.$route.meta.title = title;
        let ruleForm = localStorage.getItem('makeInfo');
        if(ruleForm){
            this.ruleForm = JSON.parse(ruleForm);
            this.$notify.info({
                title: '消息',
                message: '已保存上次编辑内容!'
            });
        }
        if(id){
            this.id = id;
            this.getReserve();
        }
        this.getProject();
    },
    beforeDestroy(){
        console.log(this.ruleForm,'this.ruleForm');
        localStorage.setItem('makeInfo',JSON.stringify(this.ruleForm))
    },
    methods:{
        phoneBlur(){
            let phone = this.ruleForm.mobile;
            if(!phone)return;
            clearTimeout(this.ints);
            this.ints = setTimeout(async ()=>{
                let {code,data} = await this.$Http.getUserByPhone({phone});
                if(code&&data){
                    this.user = data
                }
            },500)
        },
        submit(){
            this.$refs['ruleForm'].validate(async (valid) => {
                if(!valid)return;
                let obj = {...this.ruleForm};
                obj.projects.forEach(v=>v.project_ids+="")
                obj.projects = JSON.stringify(obj.projects);
                let {code,data} = await this.$Http.setReserve(obj);
                if(code){
                    localStorage.removeItem('makeInfo')
                    this.utils.backPage();
                    this.$message.success(this.ruleForm.id?'修改成功':'添加成功')
                }
            })
        },
        bedList(item){
            let obj = this.roomList.find(v=>v.id==item.room_id)
            if(obj)return obj.beds;
            return []
        },
        async changeProj(e,item){
            let {code,data} = await this.$Http.getNowFreeBed({
                // date:this.$moment().format('YYYY-MM-DD'),
                // time:this.$moment().format('HH:mm:ss'),
                order_id:this.order_id,
                // project_ids:e+""
            });
            if(code){
                this.roomList = data;
            }
        },
        async getProject(){
            let {code,data} = await this.$Http.getProject();
            if(code){
                this.projectList = data.data;
            }
        },
        async getReserve(){
            this.loading = true;
            let {code,data} = await this.$Http.getReserve({id:this.id});
            this.loading = false;
            if(code){
                data.project.forEach(v=>{
                    v.project_ids *=1
                })
                this.ruleForm = {
                    id:data.id,
                    name:data.name,//顾客姓名
                    gender:data.gender,//性别 0未知 1男 2女
                    mobile:data.mobile,//手机
                    mode:data.mode,//预约方式 0大众点评 1小程序 2电话 3我的管家
                    date:data.date,//日期
                    time:data.time,//时间
                    number:data.number,//人数
                    projects:data.project,//项目和床位信息
                    remark:data.remark,//备注
                    advance_amount:data.advance_amount,//预付金额
                };
                this.phoneBlur();
                let res = await this.$Http.getFreeBed({
                    date:this.$moment().format('YYYY-MM-DD'),
                    time:this.$moment().format('HH:mm:ss'),
                    project_ids:data.projects[0].project_ids+""
                });
                if(res.code){
                    this.roomList = res.data;
                }
            }
        },
        handleClose(dom){
            dom&&dom();
            this.dialogVisible = false;
        },
        setAd(){

        }
    }
}
</script>

<style lang="scss" scoped>
.el-input{
    width: 200px;
}
::v-deep{
    .asdws{
        .el-form-item__content{
            flex: 1;
        }
    }
}
</style>